<template>
	<div class="home">
		<div class="home-left">
			<el-button @click="handleSignClick">登陆按钮</el-button>
			<el-button @click="addClick">添加</el-button>
			<el-button @click="editClick">编辑</el-button>
			<h1>{{ title }}</h1>
			<el-form :model="formData">
				<el-form-item label="路由名称">
					<el-input v-model="formData.route_name"></el-input>
				</el-form-item>
				<el-form-item label="路由地址">
					<el-input v-model="formData.route_path"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSubmitClick">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="home-right">
			<template v-for="(item, index) in route_list">
				<el-button
					:key="index"
					type="default"
					size="small"
					style="margin-right: 5px"
					@click="handleGetRouteItem(item)"
					>{{ item.route_name }}</el-button
				>
			</template>
		</div>
	</div>
</template>

<script>
import http from '@/utils/request'
export default {
	name: 'Home',
	data() {
		return {
			title: '添加分类',
			formData: {
				route_name: '',
				route_path: ''
			},
			route_list: [
				{
					route_name: '登陆',
					route_path: 'login'
				},
				{
					route_name: 'zhuce',
					route_path: 'login'
				}
			]
		}
	},
	created() {},
	methods: {
		// tab
		handleGetRouteItem(item) {
			// 深拷贝
			this.formData = JSON.parse(JSON.stringify(item))
			console.log(item, 'item') // id  route_name route_path
		},
		// 提交数据接口
		async handleSubmitClick() {
			if (this.title === '添加分类') {
				console.log('1---------and 添加')
				await this.addPost(this.formData)
			} else {
				console.log(this.formData, '修改后的')
				await this.editPut(this.formData)
			}
			await this.getList()
		},
		// 添加列表
		async addPost(data) {
			// route_name route_path
			return await http.post('/api/routeItem', data)
		},
		// 编辑列表
		async editPut(data) {
			// id route_name route_path
			return await http.put('/api/routeItem', data)
		},
		// 查询列表
		async getList() {
			const list = await http.get('/api/routeItem')
			console.log(list.data)
			this.route_list = list.data
		},
		addClick() {
			this.title = '添加分类'
		},
		editClick() {
			// 赋值赋值操作
			this.title = '编辑分类'
		},
		// 登陆按钮
		async handleSignClick() {
			const data = await http.post('/api/login', {
				phone: '123455',
				password: 123
			})
			localStorage.setItem('token', data.token)
			console.log(data, 'data')
			// 调用列表接口，渲染右侧路由
			await this.getList()
		}
	},
	components: {}
}
</script>
<style scoped>
.home {
	width: 100vw;
	display: flex;
}
.home-left,
.home-right {
	flex: 1;
	border: 1px solid #000;
}
.home-right {
	display: flex;
	padding-left: 10px;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
</style>
